<template>
	<view>
		<!-- 购物车页面 -->
		<view class="cartCard" v-for="item in list" :key="item.productSkuId">
			<view class="cartCardTop">
				<evan-checkbox v-model="item.isChecked" @change="addPri"></evan-checkbox>
				
				<view class="cartPro">
					<image :src="item.productPic" mode=""></image>
					<view class="cartProInfo">
						<view class="cartProName">
							{{item.productName}}
						</view>
						<view class="cartProPrice">
							编号:{{item.productSkuId}}价格:{{item.price}}
						</view>
						<view class="cartProNum">
							数量:{{item.quantity}}
						</view>
					</view>
				</view>
			</view>
			<view class="cartCardBottom">
				<view class="sub" @click="subNum(item.productSkuId)">
					-
				</view>
				<view class="numPro" @change="addPri">
					{{item.quantity}}
				</view>
				<view class="add" @click="addNum(item.productSkuId)">
					+
				</view>
			</view>
		</view>
		
		<!-- 底部结算栏 -->
		<view class="bottom">
			<view class="allCheckLeft">
				<view class="allCheckName">
					全选
				</view>
				<evan-checkbox v-model="allChecked" @change="addPri"></evan-checkbox>
			</view>
			
			<view class="allCheckRight">
				<view class="all">合计:¥</view>
				<view class="money">{{allNum}}</view>
				<view class="clearing" @click="goOrder">
					结算
				</view>
			</view>
		</view>
		
		<view class="spacebottom">
			
		</view>
		
		
	</view>
</template>

<script>
	import {findAllCartItem,addPreOrder} from "@/api/user/index.js"
	export default {
		data() {
			return {
				list:[],
				numPro:1,
				//总价
				allNum:0,
				
			}
		},
		onLoad(){
			findAllCartItem().then(res=>{
				console.log(res)
				res.data.items.forEach(res=>res.isChecked=false)
				this.list=res.data.items
				// res.isChecked 不是响应式的数据,要把他写在赋值操作之前
				
				console.log(this.list)
			})
		},
		methods: {
			//减少购买数量
			subNum(val){
				var arr = this.list.find(res=>res.productSkuId==val)
					if(arr.quantity==1){
						return 1
					}else{
						arr.quantity--
					}
				this.addPri()
			},
			// 增加购买数量
			addNum(val){
				var arr = this.list.find(res=>res.productSkuId==val)
				arr.quantity++
				this.addPri()
			},
			//购物车价格计算
			addPri(){
				
					var arr = this.list.reduce((cur,val)=>{
						if(val.isChecked==true){
							return cur + val.price*val.quantity
						}else{
							return cur
						}
						
					},0)
					
					this.allNum = arr
					console.log(this.allNum)
			},
			goOrder(){
				var arr = this.list.some(res=>res.isChecked)
				console.log(arr)
				var orderPro = this.list.filter(res=>res.isChecked)
				
				if(arr){
					uni.setStorageSync("orderPro",orderPro)
					uni.navigateTo({
						url:"./order/order"
					})
					
				}else{
					uni.showToast({
						title:"请选中您要购买的商品",
						icon:"none"
					})
				}
			}

		},
		computed:{
			allChecked:{
				get(){
					return this.list.every(ele=>ele.isChecked)
				},
				set(val){
					console.log(val)
					this.list.forEach(ele=>ele.isChecked=val)
				},
				
			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #F1ECE7;
	}
</style>
<style lang="scss" scoped>
	
	.cartCard{
		width: 336px;
		margin: 25px auto;
		padding: 10px;
		background-color: #FFFFFF;
		border-radius: 12px;
		// align-items: center;
		.cartCardTop{
			display: flex;
			align-items: center;
			.cartChecked{
				
			}
			.cartPro{
				display: flex;
				
				image{
					width: 68px;
					height: 68px;
					margin: 0 10px;
				}
				.cartProInfo{
					width: 215px;
					.cartProName{
						font-size: 13px;
						color: #3e3e3e;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					.cartProPrice{
						font-size: 11px;
						color: #8d8d8d;
					}
					.cartProNum{
						font-size: 11px;
						color: #8d8d8d;
					}
				}
			}
			
		}
		.cartCardBottom{
			display: flex;
			justify-content: flex-end;
			.sub{
				width: 30px;
				height: 30px;
				background: #f1ece7;
				border-radius: 50%;
				text-align: center;
				line-height: 30px;
				font-size: 15px;
				margin: 0 3px;
			}
			.numPro{
				width: 45px;
				height: 30px;
				background: #f1ece7;
				border-radius: 15px;
				text-align: center;
				line-height: 30px;
				font-size: 15px;
				margin: 0 3px;
			}
			.add{
				width: 30px;
				height: 30px;
				background: #f1ece7;
				border-radius: 50%;
				text-align: center;
				line-height: 30px;
				font-size: 15px;
				margin: 0 3px;
			}
		}
	}
	
	.bottom{
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 75px;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.allCheckLeft{
			display: flex;
			.allCheckName{
				margin-right: 10px;
			}
			.allChoice{
				
			}
		}
		.allCheckRight{
			display: flex;
			align-items: center;
			.all{
				
			}
			.money{
				color: red;
			}
			.clearing{
				width: 104px;
				height: 40px;
				background: #354e44;
				border-radius: 14px;
				color: #fff;
				font-size: 18px;
				line-height: 40px;
				text-align: center;
			}
		}
	}
	.spacebottom{
		width: 100%;
		height: 75px;
	}
</style>
